<%--
  Created by IntelliJ IDEA.
  User: xiong
  Date: 2020/7/9
  Time: 10:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>

    <style>
        table {
            width: 80%;
            margin-left: 10%;
            text-align: center;
            border-collapse: collapse; /*合并边框线*/
            margin-top: 20px;
            font-size: 10px;
        }

        table, td, th {
            border: 1px #999 solid;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .btn {
            display: inline-block;
            background-color: red;
            color: white;
            text-align: center;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px red solid;
            outline: none;
        }

        tr {
            height: 40px;
        }

        /*固定表格宽度*/
        td, th {
            width: 33%;
        }

    </style>
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<form action="/book/pay" method="post" onsubmit="return checkForm()">
    <table>
        <%--        表头--%>
        <tr>
            <th><input type="checkbox" id="checkAll">全选</th>
            <th>书名</th>
            <th>价格</th>
        </tr>
        <%--    动态数据--%>
        <c:forEach items="${car}" var="book">
            <tr>
                <td>
                    <input type="checkbox" name="bid" value="${book.id}">
                </td>
                <td>${book.bname}</td>
                <td class="singlePrice">${book.price}</td>
            </tr>
        </c:forEach>
        <%--        总价 ，结算--%>
        <tr>
            <td>总价:<span id="totalPrice">0</span></td>
            <!--        单元格跨列-->
            <td colspan="2">
                <input type="hidden" id="hiddenTotal" name="tprice">
                <input type="submit" class="btn" value="结算">
            </td>
        </tr>
    </table>
</form>

</body>
</html>
<script>
    //jquery绑定事件（单击）
    $(function () {
        //1 实现选中商品，总价变化的功能
        $("input[name='bid']").click(function () {
            //单击时被执行
            //$(this).prop("checked")当前被选中的元素的check属性
            if ($(this).prop("checked")) {
                //获取复选框所对应书籍的单价
                //当前元素父节点的兄弟的兄弟
                var price = $(this).parent().next().next().text();
                console.log(price)
                //t通过id拿到元素
                var currenttotal = $("#totalPrice").text();
                if (currenttotal == '' || currenttotal == null) {
                    currenttotal = 0;
                }
                //重新计算当前已选书籍总价
                //Number.parseFloat转string为float
                currenttotal = Number.parseFloat(currenttotal) + Number.parseFloat(price)
                //更新总价
                $("#totalPrice").text(currenttotal);
            } else {
                var price = $(this).parent().next().next().text();
                console.log(price)
                //t通过id拿到元素
                var currenttotal = $("#totalPrice").text();
                if (currenttotal == '' || currenttotal == null) {
                    currenttotal = 0;
                }
                //重新计算当前已选书籍总价
                //Number.parseFloat转string为float
                currenttotal = Number.parseFloat(currenttotal) - Number.parseFloat(price)
                //更新总价
                $("#totalPrice").text(currenttotal);
            }
        });

        //2 实现全选
        $('#checkAll').click(function () {
            //全选选中，所有的书籍复选框选中
            //全选取消选中，所有的书籍复选框取消选中
            $("input[name='bid']").prop("checked", $(this).prop("checked"))
            //被全选，求和所有的单价
            if ($(this).prop("checked")) {
                var num = 0;
                $(".singlePrice").each(function () {
                    num += Number.parseFloat($(this).text())
                })
                $('#totalPrice').text(num)
            } else {
                $('#totalPrice').text(0)
            }
        });

        //3 书籍复选框与全选状态一致
        $("input[name='bid']").click(function () {
            //$("input[name='bid']:checked")所有被选中复选框的个数==所有复选框的个数
            if ($("input[name='bid']:checked").length == $("input[name='bid']").length) {
                $('#checkAll').prop("checked", true)
            } else {
                $('#checkAll').prop("checked", false)
            }
        });

    });
    //4 表单验证
    // 提交时选中框至少有一个被选中提交
    //onsubmit 表单提交时触发
    function checkForm() {
        var price = $("#totalPrice").text();
        if (price == 0) {
            alert("请选择付款书籍")
        } else {
            //val():表单元素的值 用户名密码？
            //text():标签文本内容<p>我是文本内容<p>
            $("#hiddenTotal").val(price)
            alert("下单完成")
            return true;
        }
        return false;
    }
</script>




